<template>
  <section class="pagemaker-form-page-val">
    <section class="list">
      <el-table
          :data="_pageVar"
          style="width: 90%;margin: 0 auto;"
      >
        <el-table-column
            label="名称"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column
            label="标识"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.code" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column
            label="默认值"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.value" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="55">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
<!--        <el-table-column  width="70">-->
<!--          <template slot="header" slot-scope="scope">-->
<!--            <i style="color: red;cursor: pointer;" class="el-icon-circle-plus" @click="addParam" />-->
<!--            <span style="color: red;cursor: pointer;" @click="addParam">添加</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-button class="add-var" size="mini" @click="addParam">添加</el-button>
    </section>
  </section>
</template>
<script>
import {getVar} from '@/components/CustomPage/apps/widget/mixins'
import { deepClone } from '@/utils'
export default {
  name: 'PageVar',
  inject: ['pageVar'],
  data() {
    return {
    }
  },
  computed: {
    _pageVar() {
      return this.pageVar()
    }
  },
  watch: {
    _pageVar: {
      handler(val){
        this.dispatch_event('page-pageVar-change', val)
      },
      deep:true
    }
  },
  methods: {
    handleDelete(index, row) {
      this._pageVar.splice(index, 1)
    },
    /**
     * 添加参数
     * */
    addParam() {
      this._pageVar.push({ name: '', code: '${route|}', value: '' })
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/center.scss';
.pagemaker-form-page-val {
  @include absolute();
  overflow: auto;
  .add-var {
    display: block;
    margin: 0 auto;
    height: 44px;
    width: 90%;
    border: 1px dotted $a3;
  }
  .empty {
    line-height: 80px;
    @include center();
    padding: 20px 0 20px 0;
    pointer-events: none;
    color: $f3;
    .icon {
      height: 50px;
      width: 50px;
      font-size: 30px;
      background: $f8;
      border-radius: 50%;
      border: 1px solid $f6;
      @include center();
    }
  }
}
</style>
